<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"> 
	<h1>{{ message }}</h1> 
	<button ref='myButton' @click="clickedButton">点击偶</button> 
	<ul> 
		<li v-for="todo in todos" ref='todos'>
	      {{ todo.text }}
	    </li>
	</ul>
</div>
<script type="text/javascript">
	let app = new Vue({ 
		el: '#app', 
		data:{ 
			message: 'Hi，大漠！' ,
			n: [1,2,3,4,5,6,7,8,9,10],
			todos: [
		      { text: '学习 JavaScript' },
		      { text: '学习 Vue' },
		      { text: '整个牛项目' }
		    ]
		}, 
		methods: { 
			clickedButton: function () { 
				console.log('Hi,大漠！') 
				console.log(this.$refs)
				console.log(this.message)
				this.$refs.myButton.innerText = this.message
				console.log(this.$refs)
			} 
		} 
	})

	setTimeout(function() { 
		app.$refs.myButton.innerText = '延迟2000ms修改h1元素的文本'; 
	}, 2000);
</script>
</body>
</html>